/**
 * 订单管理 交易订单
 */
<template>
  <div>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>分销分佣</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <el-button type="primary" size="small" style="margin-top: 2%;margin-bottom: .2%">分佣规则设置</el-button>
      <hr>
      <div>
        <span>商品：&nbsp;&nbsp;&nbsp;<el-select type="text" style="width: 15%" size="small">
          <el-option label="全部" value=""></el-option>
        </el-select></span>
        <span>订单号: <el-input type="text" style="width: 15%" size="small"/></span>
        <span>下单时间：<el-date-picker
          v-model="value1"
          type="date"
          placeholder="开始日期"
          size="small">
          </el-date-picker>
          至
          <el-date-picker
            v-model="value1"
            type="date"
            placeholder="结束日期"
            size="small">
          </el-date-picker></span>
        <el-button size="small">昨天</el-button>
        <el-button size="small">近7天</el-button>
        <br>
        <br>
        <span>推广者：<el-input placeholder="姓名或手机号" style="width: 15%" size="small"></el-input></span>
        <span>佣金状态：<el-select type="text" style="width: 15%" size="small">
          <el-option label="全部" value=""></el-option>
        </el-select></span>
        <el-button type="primary" size="small">搜索</el-button>
        <el-button size="small">重置</el-button>
      </div>
      <br>
      <div>
        <el-table size="small" border>
          <el-table-column prop="" label="商品订单号"/>
          <el-table-column prop="" label="商品"/>
          <el-table-column prop="" label="下单时间"/>
          <el-table-column prop="" label="购买者"/>
          <el-table-column prop="" label="购买者手机号"/>
          <el-table-column prop="" label="推广者"/>
          <el-table-column prop="" label="推广者手机号"/>
          <el-table-column prop="" label="佣金（元）"/>
          <el-table-column prop="" label="佣金状态"/>
          <el-table-column prop="" label="发放时间"/>
          <el-table-column prop="" label="操作">
            <el-link type="primary" @click="">补发佣金</el-link>
          </el-table-column>
        </el-table>
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'

export default defineComponent({
  name: "Distribution",
})
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}

.el-pagination{
  margin-top: 1%;
  float: right;
}
</style>




